<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      background: #f00;
    }
    .blue {
      color: blue;
    }
    .m {
      margin-top: 100px;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>{{num}}</h1>
<!--  <button v-on:click="num += 1">计数器</button>-->
  <button @click="counter">计数器</button>
  <hr>
  <button @mouseenter="sayHi('张三', $event)">张三</button>
  <button @click="sayHi('李四', $event)">李四</button>

  <div @click="handleThis(1)">
    box1
    <div  @click.stop="handleThis(2)">
      box2
      <div @click.stop.once="handleThis(3)">box3</div>
    </div>
  </div>

  <input type="text" v-model="text" @keyup.alt.enter.shift="handleChange">
</div>

<script src="vue.js"></script>
<script>
  let app = new Vue({
    data: {
      text: '',
      num: 100
    },
    created() {

    },
    methods: {
      handleChange() {
        console.log(this.text)
      },
      handleThis(e) {
        console.log(e)
      },
      sayHi(msg, e) {
        console.log(msg)
        console.log(e)
        console.log(e.target)
      },
      counter(event) {
        console.log(event)
        this.num += 1
      }
    }
  }).$mount('#app')

  /*
  new Vue({
    el: '#app'
  })
  */
</script>
</body>
</html>